<!---- Creator: Eoly -->
<!---- On 2017/1/10 -->
<!---- Call http://palerock.cn -->

<!--
    获取用户信息API：
    method:GET
    url:'http://palerock.cn/h5_back/user/show-user-info'

    请求头:
    Authorization:'Bearer '+token 密文记录

    data:
    {                           // 发送json参数
        无
    }
    返回：
    {
        data:       // 返回的用户信息
            {
                userAge:                //用户年龄
                userAvatar:             //用户头像图片名
                userDetail:             //用户详细描述
                userId:                 //用户id
                userNickName:           //用户昵称
                userPhoneNumber:        //用户电话
                userSex:                //用户性别  0：男，1：女
            }

        error:      // '0'则为操作成功

        mes:        // 操作后返回的信息
    }
-->

<!--
    修改用户信息API：
    method:POST
    url:'http://palerock.cn/h5_back/user/edit-user-info'

    请求头:
    Authorization:'Bearer '+token 密文记录

    data:
    {                                   // 发送json参数
                userAge:                //用户年龄
                userAvatar:             //用户头像图片名
                userDetail:             //用户详细描述
                userId:                 //用户id
                userNickName:           //用户昵称
                userPhoneNumber:        //用户电话
                userSex:                //用户性别  0：男，1：女
                //多余其他参数不做处理
    }
    返回：
    {

        error:      // '0'则为操作成功

        mes:        // 操作返回的信息
    }
-->

<!--
    用户上传图片API：
    method:POST
    url:'http://palerock.cn/h5_back/user/image-upload'

    请求头:
    Authorization:'Bearer '+token 密文记录

    data:
    {
        image:      // 图片转化为base64编码的字符串
                    // 需要在上传图片前对图片做裁剪处理为100x100
                    // 裁剪图片在下面有详细的演示
    }
    返回：
    {
        data:       // 返回的上传成功的文件名（需要被处理存在userAvatar里）

        error:      // '0'则为操作成功

        mes:        // 操作后返回的信息
    }
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>AngularTest</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            /*border: 0;*/
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
    <script src="../angular.js"></script>
    <script>

        var net = "http://palerock.cn/h5_back";
//                var net = "http://localhost:8080";
        //读取本地缓存
        var token = localStorage.getItem("token");

        if (!token) {
            alert("您还没有登录");
            location.href = "登陆简单演示.html";
        }

        var app = angular.module('app', [])
                .config(function ($httpProvider) {
                    //设置请求头附带 token
                    $httpProvider.defaults.headers.common.Authorization = 'Bearer ' + token;
                });

        app.controller('info', function ($scope, $http) {

            //声明用户信息
            $scope.userInfo = {};


            //单次提交图片的函数
            //参数为传入的一个文件类型input
            $scope.img_upload = function (files) {

                if (!files || !files[0]) {
                    return;
                }

                //FileReader用来读取本地文件
                var reader = new FileReader();

                //实例化图片用于被加载在画布上
                var img = new Image();

                //获取预览画布
                var canvas = document.getElementById('img');
                var ctx = canvas.getContext("2d");

                //当图片加载完毕执行动作
                reader.onload = function () {

                    // 通过 reader.result 来访问生成的 DataURL
                    img.src = reader.result;

                    //获取图片的高宽
                    var width = img.width;
                    var height = img.height;

                    //获取需要使用的正方形图片区域
                    var real_width = width > height ? height : width;
                    var real_height = width > height ? height : width;

                    //定位使图片居中
                    var img_x = (width - real_width) / 2;
                    var img_y = (height - real_height) / 2;

                    //清除原来画布内容
                    ctx.clearRect(0, 0, 100, 100);

                    //在画布上渲染头像预览
                    ctx.drawImage(img, img_x, img_y, real_width, real_height, 0, 0, 100, 100);

                    //将画布渲染的图像转换为base64字符串储存在data中
                    var data = canvas.toDataURL();

                    //发送POST请求
                    $http({

                        method: 'post',
                        url: net + "/user/image-upload",
                        data: data

                    }).then(function (res) {

                        if (!res.data.error) {

                            console.log(res);
                            alert(res.data.mes);

                            //将获得的图片名暂时保存
                            $scope.userInfo.userAvatar = res.data.data;

                        } else {

                            alert('错误代码：' + res.data.error + "," + res.data.mes);
                        }


                    }, function () {

                        alert('网络或设置错误');

                    })
                };

                //加载选中的图片
                reader.readAsDataURL(files[0]);
            };

            //获得用户信息
            $scope.getInfo = function () {
                if (token) {
                    $http.get(net + '/user/show-user-info').then(function (res) {
                        console.log(res);
                        if (!res.data.error) {

                            //将获取的用户信息绑定给userInfo
                            $scope.userInfo = res.data.data;

                            //因为userAvatar是只有图片文件名
                            //所以需要在前面加上服务器储存图片的地址，并自定义一个userAvatarAddress来储存
                            //地址：服务器路径+"/resources/img/"
                            $scope.userInfo.userAvatarAddress = net + "/resources/img/" + res.data.data.userAvatar;

                            //从服务器获得的性别数据不可以直接展示所以自定一个userSexWord来储存性别
                            //0:男，1:女
                            $scope.userInfo.userSexWord = $scope.userInfo.userSex == 0 ? "男" : "女";
                        } else {
                            alert("错误代码:"+res.data.error+","+res.data.mes)
                        }
                    }, function () {
                        alert('网络或设置错误');
                    })
                }
            };

            //编辑用户信息
            $scope.editInfo = function () {
                if (token) {

                    //处理json对象
                    //因为更改的json属性是我们自定义的userSexWord，在修改时我们需要将其转化为0或1
                    //0:男，1:女
                    $scope.userInfo.userSex = $scope.userInfo.userSexWord == "男" ? 0 : 1;

                    console.log($scope.userInfo);

                    //发送POST请求
                    $http.post(net + '/user/edit-user-info', $scope.userInfo).then(function (res) {
                        console.log(res);
                        if (!res.data.error) {

                            alert(res.data.mes);
                            //刷新用户信息
                            $scope.getInfo();

                        } else {
                            alert('错误代码：' + res.data.error + "," + res.data.mes);
                        }
                    }, function () {
                        alert('网络或设置错误');
                    })
                }
            };


            $scope.logout = function () {
                localStorage.removeItem("token");
                alert("您已注销成功");
                location.reload();
            }
        });
    </script>
</head>
<body ng-app="app">
<div ng-controller="info" ng-init="getInfo()">
    <button ng-click="getInfo()">显示用户信息</button>
    <button ng-click="editInfo()">提交修改信息</button>
    <button ng-click="logout()">注销</button>
    <table>
        <tr>
            <td>头像:</td>
            <td><img ng-src="{{userInfo.userAvatarAddress}}" alt="头像" width="50"/>
                <!--设置一个隐藏域来存储用户头像的图片名，与userInfo.userAvatar绑定，在上传头像时将返回的地址储存-->
                <input type="hidden" ng-model="userInfo.userAvatar"/>
            </td>
        </tr>
        <tr>
            <td>昵称:</td>
            <td><input type="text" ng-model="userInfo.userNickName" placeholder="昵称"/></td>
        </tr>
        <tr>
            <td>电话:</td>
            <td><input type="text" ng-model="userInfo.userPhoneNumber" placeholder="电话"/></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <select ng-model="userInfo.userSexWord" ng-options="x for x in ['男','女']"></select>
            </td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input type="text" ng-model="userInfo.userAge" placeholder="年龄"/></td>
        </tr>
        <tr>
            <td>详细信息:</td>
            <td><input type="text" ng-model="userInfo.userDetail" placeholder="详细信息"/></td>
        </tr>
        <tr>
            <!--在选择文件动作后自动触发上传的函数-->
            <td>上传头像:</td>
            <td><input type="file" accept="image/jpg,image/jpeg,image/png" file-model="images"
                       onchange="angular.element(this).scope().img_upload(this.files)"/></td>
        </tr>
    </table>
    <canvas id="img" width="100" height="100"></canvas>
</div>

</body>
</html>